import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtAvatar, AtIcon } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { get_my_collect_api, isLike_api } from './service'
import './index.scss'

import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
/**
 * 我的收藏
 */

interface ITestData {
  id: number
  price: number
  questionImg: string
  questionName: string
  questionNumber: number
  questionSubtitle: string
}
interface ICourseData {
  id: number
  price: number
  courseImg: string
  courseName: string
  courseNumber: number
  courseSubtitle: string
}

type I = {
  current: number
  CollectData: ITestData[] | ICourseData[]
  islike_status1: boolean
  islike_status2: boolean
  islike_status3: boolean
  system: string
  pageSize: number
  pageNum: number
}

interface MyCollect {
  state: I
}

class MyCollect extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      CollectData: [],
      islike_status1: true,
      islike_status2: true,
      islike_status3: true,
      system: '',
      pageSize: 20,
      pageNum: 1,
    }
  }
  // tab切换
  handleClick(value) {
    this.setState(
      {
        pageNum: 1,
        CollectData: [],
        current: value,
      },
      () => {
        this.get_my_collect()
      },
    )
  }
  componentWillMount() {
    const system = Taro.getStorageSync('system')
    this.setState({
      system,
    })
    this.get_my_collect()
  }
  get_my_collect() {
    const { current, pageSize, pageNum, CollectData } = this.state
    const params = {
      type: current + 1,
      pageSize,
      pageNum,
    }
    get_my_collect_api(params).then(({ result, data, message }) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      const arr = Array.from(data)
      this.setState({
        CollectData: CollectData.concat(...arr),
      })
    })
  }

  isLike(id, type) {
    isLike_api(id, type).then(({ result, data, message }) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.get_my_collect()
    })
  }

  goto_reserve_page(id) {
    Taro.navigateTo({
      url: '/pages/Consulting/ConsultingDetails/index?id=' + id,
    })
  }

  onReachBottom() {
    const { pageNum, current } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_my_collect()
      },
    )
  }

  render() {
    const consultTeacherTypeArr = ['', '高级', '资深', '主任', '专家']
    const { current, CollectData, islike_status1, islike_status2, islike_status3, system } = this.state
    const tabList = [{ title: '测试' }, { title: '课程' }]
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的收藏' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            <AtTabsPane current={current} index={0}>
              <View style='background-color: #FAFBFC;text-align: center; padding-top:10px'>
                {CollectData.length === 0 ? (
                  <View style='color:#8c8c8c'>暂无数据...</View>
                ) : (
                  CollectData.map((c, i) => {
                    return (
                      <View className='wrapper' key={i}>
                        <View className='left'>
                          <CImage src={c.questionImg}></CImage>
                        </View>
                        <View className='right'>
                          <View className='title'>{c.questionName}</View>
                          <View className='courses'>
                            <Text>{c.questionNumber}</Text>节课 | 专业课程
                          </View>
                          <View className='noto'>{c.questionSubtitle}</View>
                          <View className='footer'>
                            {system.indexOf('iOS') < 0 ? <View className='price'>￥{c.price}</View> : <View className='price'>免费</View>}

                            <View onClick={this.isLike.bind(this, c.id, 1)} className='like_wrapper'>
                              {islike_status1 ? <Image src={like} /> : <Image src={dislike} />}
                              <Text>{islike_status1 ? '已收藏' : '收藏'}</Text>
                            </View>
                          </View>
                        </View>
                      </View>
                    )
                  })
                )}
              </View>
            </AtTabsPane>
            <AtTabsPane current={current} index={1}>
              <View style='background-color: #FAFBFC;text-align: center; padding-top:10px'>
                {CollectData.length === 0 ? (
                  <View style='color:#8c8c8c'>暂无数据...</View>
                ) : (
                  CollectData.map((c, i) => {
                    return (
                      <View className='wrapper' key={i}>
                        <View className='left'>
                          <CImage src={c.courseImg}></CImage>
                        </View>
                        <View className='right'>
                          <View className='title'>{c.courseSubtitle}</View>
                          <View className='courses'>
                            <Text>{c.courseNumber}</Text>节课 | 专业课程
                          </View>
                          <View className='noto'>{c.courseSubtitle}</View>
                          <View className='footer'>
                            {system.indexOf('iOS') < 0 ? <View className='price'>￥{c.price}</View> : <View className='price'>免费</View>}

                            <View onClick={this.isLike.bind(this, c.id, 2)} className='like_wrapper'>
                              {islike_status2 ? <Image src={like} /> : <Image src={dislike} />}
                              <Text>{islike_status2 ? '已收藏' : '收藏'}</Text>
                            </View>
                          </View>
                        </View>
                      </View>
                    )
                  })
                )}
              </View>
            </AtTabsPane>
            {/* <AtTabsPane current={current} index={2}>
              <View style='background-color: #FAFBFC;text-align: center; padding-top:10px'>
                {data.length === 0 ? (
                  <View className='noContent'>
                    <View>
                      <CImage src={not_found}></CImage>
                    </View>
                    <View>亲，您还没有关注的心理咨询师 快去关注几个呗！</View>
                    <View
                      onClick={() => {
                        Taro.switchTab({
                          url: '/pages/Consulting/index',
                        })
                      }}
                    >
                      去关注
                    </View>
                  </View>
                ) : (
                  <View className='consulting'>
                    {data !== [] && data.length > 0
                      ? data.map((c, i) => {
                          return (
                            <View className='wrapper' key={i}>
                              <View className='at-row content'>
                                <View className='at-col at-col-1 at-col--auto '>
                                  <AtAvatar image={c.therapistImg} circle size='large'></AtAvatar>
                                </View>
                                <View className='at-col at-col--auto right '>
                                  <View className='title'>{c.therapistName}</View>
                                  <View className='rank'>国家{consultTeacherTypeArr[c.consultTeacherType]}心理咨询师</View>
                                  <View className='noto'>{c.briefIntroduction}</View>
                                  <View className='footer'>
                                    <View>{system.indexOf('iOS') < 0 ? c.price + '元/' + c.time + '分钟' : '免费'}</View>
                                    <View>{c.type === 0 ? '当面' : '视频'}</View>
                                    <View onClick={this.isLike.bind(this, c.id, 3)} className='like_wrapper'>
                                      {islike_status3 ? <Image src={like} /> : <Image src={dislike} />}
                                      <Text>{islike_status3 ? '已收藏' : '收藏'}</Text>
                                    </View>
                                  </View>
                                </View>
                              </View>
                              {system.indexOf('iOS') < 0 ? (
                                <Button className='btn' onClick={this.goto_reserve_page.bind(this, c.id)}>
                                  预约
                                </Button>
                              ) : (
                                <Button className='btn' onClick={this.goto_reserve_page.bind(this, c.id)}>
                                  查看
                                </Button>
                              )}
                            </View>
                          )
                        })
                      : ''}
                  </View>
                )}
              </View>
            </AtTabsPane> */}
          </AtTabs>
        </View>
      </View>
    )
  }
}

export default MyCollect
